<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card {
            border: 1px solid red;
            display: flex;
            margin: 10px;
            position: relative;
            padding: 5px;
        }
        
        .bar {
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>
    <script>
        let data = []

        const xhr = new XMLHttpRequest();
        xhr.open("GET", "/data.json");
        xhr.onload = function() {
            // json字符串解析js 对象
            const res = JSON.parse(xhr.response)
            data = res.result;
            render();
        }

        xhr.onloadstart = function() {
            console.log("请求开始执行")
        }

        xhr.onprogress = function() {
            console.log("请求开始响应")
        }
        xhr.send();

        function render() {
            let html = ""
                // 遍历结果 生产html 字符串
            for (let i = 0; i < data.length; i++) {
                const item = data[i]
                const card = `<div class="card">
                    <h1>${item.name}</h1>
                    <h2>${item.age}</h2>
                    <h3>${item.addr}</h3>
                    <div class="bar">
                        <span onclick="test('${item.name}');">编辑</span>
                        <span onclick="deleteItem('${item.id}')">删除</span>
                    </div>
                </div> `
                html += card;
            }
            const appDiv = document.getElementById("app")
                //插入页面
            appDiv.innerHTML = html;
        }

        function deleteItem(id) {
            //找索引
            const index = data.findIndex(i => i.id === id)
                //删除索引位置的元素
            data.splice(index, 1)
                //重新渲染
            render();
        }
    </script>
</body>

</html>